<template>
    <div>
        <div class="couponList activity-right">
            <h3>优惠券列表</h3>
            <el-input style="width:25%;" class='input' @keyup.enter.native="getCouponList(page)" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="请输入查询条件"></el-input>
            <el-button type="primary" @click.enter="getCouponList(page)" icon="el-icon-search">查询优惠券</el-button>
            <!-- 恢复订单优惠券 -->
            <el-input style="width:30%;margin-left:30px;" class='input' @keyup.enter.native="restoreCoupon()" prefix-icon="el-icon-search" clearable v-model="orderId"  placeholder="请输入订单号"></el-input>
            <el-button type="primary" @click.enter="restoreCoupon()" icon="el-icon-search">恢复优惠券</el-button>
            <el-button class='right' style="margin-bottom:20px;" type="primary" @click="addCoupon"> 添加优惠券 </el-button>
            <el-table class="table-common" :data="tableData" element-loading-text="拼命加载中" style="width: 100%">
                <el-table-column class="coupon-colum" prop="name" label="优惠券名称" width="150">
                </el-table-column>
                <el-table-column class="coupon-colum" prop="type" label="优惠券类别" width="100">
                    <template slot-scope="scope">{{scope.row.type==1 ? '满减' : (scope.row.type==2 ? '折扣' : (scope.row.type == 3 ? '代金券' : ''))}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="sd" label="使用条件" width="120">
                    <template slot-scope="scope" >
                        <span v-if="scope.row.type==1 ">
                            满{{scope.row.sillAmount}}元减{{scope.row.couponAmount}}元
                        </span>
                        <span v-if="scope.row.type==3">
                            {{scope.row.couponAmount}}元代金券
                        </span>
                    </template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="status" label="优惠券状态" width="100">
                    <template slot-scope="scope">{{scope.row.status==1 ? '有效' : (scope.row.status==0 ? '无效' : '')}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="isNewUser" label="新人优惠券" width="100">
                    <template slot-scope="scope">{{scope.row.isNewUser==1 ? '是' : '否'}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="isAllActivity" label="关联全场" width="100">
                    <template slot-scope="scope">{{scope.row.isAllActivity==1 ? '是' : '否'}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="isGiftPack" label="关联礼包" width="100">
                    <template slot-scope="scope">{{scope.row.isGiftPack==1 ? '是' : '否'}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="startTime" label="有效期时间" width="180">
                    <template slot-scope="scope"> {{'开始: ' + $formate(scope.row.startTime,'yyyy-MM-dd hh:mm:ss')}} <br/> {{'结束: ' + $formate(scope.row.endTime,'yyyy-MM-dd hh:mm:ss')}}</template>
                </el-table-column>
                <!-- <el-table-column prop="endTime" label="有效期结束时间" width="180">
                    <template slot-scope="scope">{{ $formate(scope.row.endTime,'yyyy-MM-dd hh:mm:00') }}</template>
                </el-table-column> -->
                <el-table-column class="coupon-colum" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editCoupon(scope.row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <section class="pagination">
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
        </div>
    </div>
</template>

<script>
import { getCouponList, restoreUserCoupons } from "../../data/postData";
export default {
    mounted() {
        let { page } = this.$store.state.coupon;
       // this.page = page || 1;
        this.getCouponList(this.page);
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            page: this.$store.state.coupon.page,
            tableData: null,
            total: 0,
            size: "10",
            form: {},
            name: '',
            orderId:''
        };
    },
    methods: {
        //恢复订单优惠券
        restoreCoupon(){
            var params = {
                "data": {
                    "orderId": this.orderId
                }
            }
            this.$fetch.post(restoreUserCoupons, params).then( res => {
                 this.$message({
                    message: res.message,
                    type: 'success',
                    duration: 1000
                })
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'error',
                    duration: 1000
                })
            })
        },
        //获取优惠券列表
        getCouponList(page) {
            var params = {
                data: {
                    page: page,
                    size: "10",
                    name: this.name
                }
            };
            this.$fetch.post(getCouponList, params).then(res => {
                this.tableData = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'error',
                    duration: 1000
                })
            });
        },
        //添加优惠券
        addCoupon() {
            this.$router.push({ path: "/addCoupon" });
        },
        editCoupon(scope) {
            this.$router.push({ path: "/editCoupon/" + scope.id });
        },
        handlePageChange(val) {
            this.page = val;
            this.getCouponList(this.page);
            this.$store.dispatch("saveCouponListPage", this.page);
        }
    }
};
</script>

<style scoped lang="less">
// @import url('../../style/coupon.less');
.couponList {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>